body{
	font-size: 14px;
	font-family: Microsoft YaHei, Tahoma, Geneva, sans-serif;
	background: #111;  
}

#content ul{
	width: 1000px;
	margin: 150px auto;
	padding: 60px 0;
}

#content ul li{
	width: 225px;
	height: 180px;
	margin-right:20px;
	float: left;
	list-style: none;
}

#content ul li :last-child{
	margin-right: 0px;
}

#content ul li a{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	perspective: 800px;
}

#content ul li a >div{
	position: absolute;
	left:0;
	height: 0;
	width: 100%;
	height: 100%;
	color: #fff;
	transform-style: preserve-3d;
	transition: .8s ease-in-out;
	backface-visibility: hidden;
}

#content ul li a div:first-child{
	transform: rotateY(0);
	z-index: 2;
}

#content ul li a div:last-child{
	background-color: orange;
	transform: rotateY(180deg);
	z-index: 1;
}

#content ul li a:hover div:first-child{
	transform: rotateY(-180deg);
}

#content ul li a:hover div:last-child{
	transform: rotateY(0);
} 

#content ul li a div h3{
height: 180px;
line-height: 180px;
text-align: center;
font-size: 25px;
}

